@import '~styles/settings.scss';

.c-mini-legend {
  background-color: $white;
  box-shadow: 0 1px 3px 0 rgba($black, 0.25);
  max-width: rem(400px);
  z-index: 5;

  .mini-legend-items {
    padding: rem(10px);
    padding-bottom: rem(5px);
  }

  .satellite-basemaps-wrapper .c-map-legend-basemaps .header {
    padding-left: rem(10px);
  }

  .mini-legend-layers {
    font-size: rem(13px);
    font-weight: 400;
    color: $slate;

    li {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: rem(5px);
      padding: 0 rem(35px) 0 0;

      > div {
        flex: 1;
      }

      span {
        height: rem(10px);
        width: rem(10px);
        min-height: rem(10px);
        min-width: rem(10px);
        border-radius: 50%;
        margin-right: rem(10px);
      }

      p {
        display: flex;
        flex-direction: column;
      }

      .time-range {
        margin-top: 5px;
        font-size: 12px;
        color: rgba($slate, 0.8);
      }

      .time-range-disclaimer {
        margin-top: 5px;
        font-size: 10px;
        color: rgba($slate, 0.8);
      }
    }
  }

  .link-to-map {
    position: absolute;
    top: rem(10px);
    right: rem(10px);
  }
}
